<template>
    <el-main v-loading="loading">
        <vue-office-docx
            v-if="!isPdf"
            :src="url"
            @rendered="handleRenderedDocx"
            @error="errorHandler"
        />
        <vue-office-pdf
            v-if="isPdf"
            :src="url"
            @rendered="handleRenderedPdf"
            @error="errorHandler"
        />
    </el-main>
</template>

<script setup>
import {ref} from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

const props = defineProps(["url"])
console.log(props.url)
let loading = ref(true)
let isPdf = ref(false)

const handleRenderedDocx = () => {
    const docxDom = document.querySelectorAll('.vue-office-docx .docx-wrapper .docx')
    docxDom.forEach(value => {
        value.style.display = "flex"
        value.style.flexDirection = "row"
        value.style.justifyContent = "center"
        value.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)"
    })
    loading.value = false
}
const handleRenderedPdf = () => {
    document.querySelector('.vue-office-pdf').style.overflow = "visible";
    const pdfDom = document.querySelectorAll('.vue-office-pdf-wrapper')
    pdfDom.forEach(value => {
        value.style.background = "#fff"
        value.style.padding = "30px 0"
        value.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)"
    })
    loading.value = false
}
const errorHandler = () => {
    ElMessage.error("文件加载失败,请稍后再试")
}
</script>

<style scoped>
:deep(.vue-office-docx) {
    overflow: visible
}

:deep(.vue-office-docx .docx-wrapper) {
    background-color: #fff;
    padding: 0;
    width: 100%;
}
</style>
